<div id="material-detail" class="material-detail-widget">
  <div class="content">
    <ul class="nav nav-tabs">
      <li role="presentation" class="active js-info" data-target="#info-tab"><a href="javascript:;">{{ 'admin.cloud_file.detail.basic_info'|trans }}</a></li>

      {% if material.type == 'video' %}
        <li role="presentation" class="js-cover" data-target="#cover-tab"><a href="javascript:;">{{ 'admin.cloud_file.detail.cover_img'|trans }}</a></li>
      {% endif %}
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="info-tab">
        {% include 'material-lib/web/edit-detail-form.html.twig' %}
      </div>

      {% if material.type == 'video' %}
      <div class="tab-pane es-piece" id="cover-tab">
        {% if material.convertStatus|default(false) == 'success' %}
        <form id="cover-form" action="{{ editUrl }}">
          <div class="piece-header">{{ 'admin.cloud_file.current_cover_img'|trans }}</div>
          <div class="form-group">
            <div class="material-detail-img">
              <div class="detail-img">
                <img class="js-cover-img" src="{{ asset(material.thumbnail|default('assets/img/default/cloud_' ~ material.type ~ '.png')) }}" width="100px"></div>
              {% if material.thumbnail|default(0) %}
              <a class="btn btn-fat btn-info js-reset-btn" href="javascript:;">{{ 'form.btn.restore'|trans }}</a>
              {% endif %}
            </div>
          </div>
          <div class="piece-header">{{ 'admin.cloud_file.cover_img_setting'|trans }}</div>
          <div class="form-group">
            {% if material.thumbnail|default(0) %}
            <div id="thumbnail-set">
              <div class="links nav nav-pills">
                <li class="active js-set-default" data-target="#default-thumbnails">
                  <a href="javascript:;">{{ 'admin.cloud_file.thumbnails_select_default'|trans }}</a>
                </li>
                <li class="js-set-select" data-target="#self-select" >
                  <a  href="javascript:;">{{ 'admin.cloud_file.thumbnails_select_self'|trans }}</a>
                </li>
              </div>
              <div class="tab-content-img">
                <div class="tab-pane-img row active" id="default-thumbnails">
                  {% for thumbnail in thumbnails %}
                  <div class="col-sm-4 col-xs-6" style="padding-bottom:10px">
                    <img class="js-img-set img-responsive" style="cursor: pointer;" src="{{ asset(thumbnail.url) }}" data-no="{{ thumbnail.no }}"></div>
                  {% endfor %}
                </div>
                <div class="tab-pane-img material-detail-img video-detail-img" id="self-select">
                  <div class="detail-img">
                    <iframe src="{{ path('material_lib_file_player', {fileId:material.id, watermarkOpened:'hidden', 'disableVolumeButton': 1, 'disablePlaybackButton':1, 'disableResolutionSwitcher': 1}) }}" id="viewerIframe" width="100%" allowfullscreen webkitallowfullscreen height="100%" style="border:0px"></iframe>
                  </div>
                  <div class="btn-content">
                    {% if material.thumbnail|default(0) %}
                    <a class="btn btn-fat btn-info js-screenshot-btn" href="javascript:;" data-url="{{ path('material_thumbnail_generate', {globalId:material.no}) }}" data-loading-text="{{ 'cloud_file.material_thumbnail_generate'|trans }}">{{ 'cloud_file.screen_shot_btn'|trans }}</a>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
            {% endif %}
          </div>
          <input type="hidden" name="thumbNo" id="thumbNo">
          <input type="hidden" id="orignalThumb" value="{{ asset(material.thumbnail) }}">
          <div class="material-detail-save">
            {% if material.thumbnail|default(0) %}
            <button class="btn btn-fat btn-primary" id="save-btn" data-loading-text="{{ 'form.btn.save.submiting'|trans }}" type="submit">{{ 'form.btn.save'|trans }}</button>
            <a class="btn btn-link js-back">{{ 'form.btn.back_to_list'|trans }}</a>
            {% endif %}
          </div>
        </form>
        {% else %}
        <div class="empty text-muted">{{ 'cloud_file.transcoding_tips'|trans }}</div>
        {% endif %}
      </div>
      {% endif %}
    </div>
  </div>
</div>
